<template>
  <div class="maindiv">
    <el-row class="row-bg" >
      <el-col :span="24">
        <dv-border-box-10>
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="24" style="height: 60px;">
              <dv-border-box-11 title="友谊急诊大数据展示屏">
                <!-- <el-input v-model="url" type="text" style="width: 20%" /> &nbsp; &nbsp;
    <el-button @click="join" type="primary">连接</el-button>
    <el-button @click="exit" type="danger">断开</el-button>

    <br />
    <el-input type="textarea" v-model="message" :rows="9" />
    <el-button type="info" @click="send">发送消息</el-button>
    <br />
    <br />
    <el-input type="textarea" v-model="text_content" :rows="9" /> 返回内容
    <br />
    <br /> -->
              </dv-border-box-11>
          
               </el-col>
          </el-row>
          <el-row type="flex"  class="row-bg" justify="space-around" style="height: 710px;">
            <el-col :span="24" style="height: 700px;margin: 10px;">
              <baidu-map class="map" :center="{lng: 121.663040, lat: 38.926420}" :zoom="14" :scroll-wheel-zoom="true" mapType="BMAP_HYBRID_MAP">
              <!-- <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"></bm-map-type> -->
              <!-- <bm-boundary name="友谊急诊" :strokeWeight="1" strokeColor="blue"></bm-boundary> -->
              <bm-label content="友谊医院" :position="{lng: 121.663040, lat: 38.926420}" :labelStyle="{color: 'blue', fontSize : '15px'}" title="友谊急诊"/>
              <!-- <bm-marker :position="{lng: 121.663040, lat: 38.926420}" :dragging="true" animation="BMAP_ANIMATION_DROP" :icon="{url:'http://developer.baidu.com/map/jsdemo/img/fox.gif', size: {width: 300, height: 157}}"></bm-marker> -->

<bm-info-window  title="患者信息" :position="{lng: 121.663040, lat: 38.926420}"   :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">

<div style="color:rgb(245, 206, 79);font-size:12px;">
   <div style="margin-top:2px;height: 2px; width:100%;background-color: #1981E1 !important;"></div>

   <div style="margin-top:8px;width:220px">  患者名字：XXX</div>
   <div style="margin-top:5px;width:220px">  患者年龄：37</div>
   <div style="margin-top:5px;width:220px">  患者位置：大连市沙河口区黄河路620号</div>
   <div style="margin-top:5px;width:220px">  患者距离：6.4公里</div>
   <div style="margin-top:5px;width:220px">  患者病情：</div>
   <div style="margin-top:5px;width:220px">  过敏史及病史：</div>
   <div style="margin-top:5px;width:220px">  患者体征：</div>  
 </div>

</bm-info-window>

<bm-info-window  title="患者信息" :position="{lng: 121.664040, lat: 38.929420}"   :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">

<div style="color:rgb(245, 206, 79);font-size:12px;">
   <div style="margin-top:2px;height: 2px; width:100%;background-color: #1981E1 !important;"></div>

   <div style="margin-top:8px;width:220px">  患者名字：XXX</div>
   <div style="margin-top:5px;width:220px">  患者年龄：37</div>
   <div style="margin-top:5px;width:220px">  患者位置：大连市沙河口区黄河路620号</div>
   <div style="margin-top:5px;width:220px">  患者距离：6.4公里</div>
   <div style="margin-top:5px;width:220px">  患者病情：</div>
   <div style="margin-top:5px;width:220px">  过敏史及病史：</div>
   <div style="margin-top:5px;width:220px">  患者体征：</div>  
 </div>

</bm-info-window>
             </baidu-map>
                  </el-col>
          </el-row>
          <el-row type="flex"  class="row-bg" justify="space-around" style="height: 300px;">
            <el-col :span="24" style="height: 200px;margin: 10px;">
                    <dv-scroll-board :config="config" style="width:100%;height:220px" />
                  </el-col>
          </el-row>
        </dv-border-box-10>
      </el-col>
    </el-row>
    
  </div>
  
</template>

<script>

export default {
  name: 'boundary',
  name: 'datav01',
  data(){
    return{
      url: "ws://ndwdt.com/prod-api/ws",
        message: "",
        text_content: "",
        ws: null,

      config:{
        header: ['通知类型', '内容', '时间'],
        data: [
          ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
          ['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3'],
          ['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>'],
          ['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3'],
          ['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3'],
          ['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3'],
          ['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>'],
          ['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3'],
          ['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3'],
          ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3']
        ],
        index: true,
        columnWidth: [50],
        align: ['center'],
       
        
      },
      infoWindow: {
        show: true
        
      }
    }
  },
  methods: {
    infoWindowClose (e) {
      this.infoWindow.show = false
    },
    infoWindowOpen (e) {
      this.infoWindow.show = true
    },
    clear () {
      this.infoWindow.contents = ''
    },
    join() {
      const wsuri = this.url;
      this.ws = new WebSocket(wsuri);
      const self = this;
      this.ws.onopen = function (event) {
        self.text_content = self.text_content + "已经打开连接!" + "\n";
      };
      this.ws.onmessage = function (event) {
        self.text_content = event.data + "\n";
      };
      this.ws.onclose = function (event) {
        self.text_content = self.text_content + "已经关闭连接!" + "\n";
      };
    },
    exit() {
      if (this.ws) {
        this.ws.close();
        this.ws = null;
      }
    },
    send() {
      if (this.ws) {
        this.ws.send(this.message);
      } else {
        alert("未连接到服务器");
      }
    }
  }
  
}
</script>

<style scoped>
.maindiv {
  width: 100%;
  height: 950px;
  background-image: url('../../../assets/images/datavbg.png');
}
.el-row {
  margin-bottom: 10px;
  padding: 0 10px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #d3dce6;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 0;
  /*background-color:;*/
}
.map {
  width: 100%;
  height: 700px;
}



/*地图标题 infoWindow*/
.BMap_bubble_title{
  color:rgb(219, 188, 85);
  font-size:12px;
  /*font-weight: bold;*/
  text-align:left;
  background:transparent !important;
}

.BMap_pop .BMap_top{
  background:#3F4358 !important;
  border:0 !important;
}
.BMap_pop .BMap_center{
  width:251px !important;
  border:0 !important;
  background:#3F4358 !important;
}
.BMap_pop .BMap_bottom{
  border:0 !important;
  background:#3F4358 !important;
}

.BMap_pop div:nth-child(3){
  background:transparent !important;
}
.BMap_pop div:nth-child(3) div{
  border-radius:7px;
  background:#3F4358 !important;
  border:0 !important;
}
.BMap_pop div:nth-child(1){
  border-radius:7px 0 0 0;
  background:transparent !important;
  border:0 !important;
}
.BMap_pop div:nth-child(1) div{
  background:#3F4358 !important;
}
.BMap_pop div:nth-child(5){
  border-radius:0 0 0 7px;
  background:transparent !important;
  border:0 !important;
}
.BMap_pop div:nth-child(5) div{
  border-radius:7px;
  background:#3F4358 !important;
}
.BMap_pop div:nth-child(7){
  background:transparent !important;
}
.BMap_pop div:nth-child(7) div{
  border-radius:7px;
  background:#3F4358 !important;
}

.BMap_pop div:nth-child(8) div{
  /*border-radius:7px;*/
  background:#3F4358 !important;
}
/*窗体阴影*/
.BMap_shadow div:nth-child(5) img{
  margin-left: -1100px !important;
}

.BMap_shadow div:nth-child(4){
  width: 262px !important;
}

/*下面箭头替换为自己本地修改过的
img[src="http://api0.map.bdimg.com/images/iw3.png"] {
  content: url('../img/Screen/arrow.png');
}
img[src="https://api.map.baidu.com/images/iw3.png"] {
  margin-top: -692px !important;
  filter: alpha(opacity=70);
  content: url('../img/Screen/arrow.png');
}*/
</style>



